<template>
    <view class="wrap">
        <Navbar :title="title"></Navbar>
        <view class="searchbox">
            <u--input v-model="search" placeholder="请输入资料名称" prefixIcon="search" shape="circle" color="#fff"
                prefixIconStyle="color: #ffffff;" placeholderClass="placeholderStyle" style="height: 72rpx;background: #636883;border-radius: 36rpx;
                border: 2rpx solid #FFFFFF;;" @confirm="toSearch"></u--input>
        </view>
        <!-- <view class="tabbox">
            <view class="tablist">
                <view v-for="item in tablist" :key="item.id" :class="item.id == currentId ?'item_tab active' : 'item_tab'" @click="changeTab(item)">
                    <text>{{item.text}}</text>
                    <text v-if="item.id == currentId" class="line"></text>
                </view>
            </view>
        </view> -->
        <view class="content">
            <view class="meal_list">
                <view class="list_title">
                    <img class="list_icon" src="@/static/img/list_icon.png" alt="">
                    <text>套餐列表</text>
                </view>
                <u-empty mode="list" v-if="!dataList.length"></u-empty>
                <view class="list">
                    <u-list @scrolltolower="scrolltolower" height="1100rpx">
                        <u-list-item v-for="(item, index) in dataList" :key="item.Id">
                            <view class="item_meal" @click="chooseItem(item)">
                                <view v-if="!item.isChecked" class="radio_box"></view>
                                <view v-if="item.isChecked" class="active_radio_box">
                                    <view class="active_radio_box_inside"></view>
                                </view>
                                <view class="meal_detail">
                                    <view class="meal_name">{{ index + 1 }}.{{ item.DocumentName }}</view>
                                    <view class="item_price">
                                        <view class="red_price">
                                            <view>￥</view>
                                            <view class="big_price">{{ item.SalePrice }}</view>
                                        </view>
                                        <view class="original_price">原价：￥{{ item.DocumentPrice }}</view>
                                        <view class="now_price">打后折：￥{{ item.SalePrice }}</view>
                                    </view>
                                </view>
                            </view>
                        </u-list-item>
                    </u-list>
                </view>
            </view>
        </view>
        <view class="buy_btn" @click="toBuy">购买</view>
        <!-- <PopWindow /> -->
        <u-popup :show="dialogShow" mode="center" round="8" closeable @close="closeDialog">
            <view class="dialog_box">
                <view>购买信息填写</view>
                <view class="input_wrap">
                    <u--input placeholder="请输入电话" border="surround" v-model="phoneValue"></u--input>
                </view>
                <view class="submit_btn" @click="submitOrder">提交</view>
                <u-toast ref="dialogToast"></u-toast>
            </view>
        </u-popup>
    </view>
</template>
<script>
import PopWindow from '@/components/PopWindow'
import Navbar from '@/components/nav.vue'
export default {
    data () {
        return {
            title: '考研专业课电子书',
            tablist: [
                {
                    id: 0,
                    text: '套餐'
                },
                {
                    id: 1,
                    text: '单科'
                }
            ],
            currentId: 0,
            search: '',
            PageIndex: 1,
            PageSize: 10,
            dataList: [],
            checkedData: [],
            scrollFlag: true,
            dialogShow: false,
            phoneValue: '',
            checkedList: []
        }
    },
    components: {
        PopWindow, Navbar
    },
    created () {
        this.getDataList()
    },
    methods: {
        // 搜索
        toSearch (item) {
            this.search = item
            this.dataList = []
            this.PageIndex = 1
            this.getDataList()
        },
        async getDataList () {
            uni.showLoading({ title: "加载中" });
            const res = await this.$http.post(`examspecialized/mealinfos`, {
                "pageSize": this.PageSize,
                "pageIndex": this.PageIndex,
                "keyWord": this.search
            })
            let getData = res.Data.DataList;
            uni.hideLoading()
            if (getData.length == 0) {
                this.scrollFlag = false
            }
            getData.forEach(item => {
                item.isChecked = false
            })
            this.dataList = this.pageIndex == 1 ? getData : this.dataList.concat(getData)
        },

        //点击每一个套餐或单科
        chooseItem (item) {
            item.isChecked = !item.isChecked
            let newarr = [], newData = []
            if (item.isChecked && this.checkedData.indexOf(item.Id) == -1) {
                this.checkedData.push(item.Id)
                this.checkedList.push(item)
            } else if (!item.isChecked && this.checkedData.includes(item.Id)) {
                this.checkedData = this.checkedData.filter(item2 => {
                    item2 != item.Id && newarr.push(item2)
                })
                this.checkedData.forEach(item => {
                    if (newarr.includes(item.Id)) {
                        newData.push(item)
                    }
                })
                this.checkedData = newarr
                this.checkedList = newData
            }
            console.log(this.checkedData)
        },
        scrolltolower () {
            if (this.scrollFlag) {
                this.PageIndex = this.PageIndex + 1
                this.getDataList()
            }
        },
        // 去购买
        async toBuy () {
            if (this.checkedData.length == 0) {
                return uni.showToast({
                    icon: "none",
                    title: "请选择要购买的产品"
                })
            }
            this.dialogShow = true
        },
        // 关闭弹框
        closeDialog () {
            this.dialogShow = false
        },
        // 提交订单
        async submitOrder () {
            if (this.phoneValue == '') {
                this.$refs.dialogToast.show({
                    type: 'error',
                    icon: false,
                    message: `请填写手机号码`,
                })
            } else {
                // 创建订单
                let obj = {
                    mealIds: this.checkedData,
                    phone: this.phoneValue
                }
                const res = await this.$http.post('examspecialized/order', obj)
                if (res.Code != 200) {
                    return uni.showToast({ title: res.Msg, icon: "none" });
                }
                this.orderId = res.Data.Id
                let total = 0
                this.checkedList.forEach(item => {
                    if (item.isChecked) {
                        total = total + item.SalePrice
                    }
                })
                // 预付款
                let obj2 = {
                    openId: uni.getStorageSync('openid'),
                    total_fee: total,
                    orderId: this.orderId
                }
                const res2 = await this.$http.get('pay/prepay', obj2)
                let resData = JSON.parse(res2.Data.Data)
                wx.requestPayment({
                    timeStamp: resData.timeStamp,
                    nonceStr: resData.nonceStr,
                    signType: resData.signType,
                    paySign: resData.paySign,
                    package: resData.package,
                    success () {
                        uni.showToast({ title: `购买成功` })
                        let pages = getCurrentPages();
                        let prevPage = pages[pages.length - 2]; //上一个页面
                        prevPage.$vm.setTabs(2)
                        uni.navigateBack()
                    }
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #79829A;
    // background-image: url('../../../static/img/bg2.png');
    background-size: 750rpx 450rpx;
    background-repeat: no-repeat;

    .searchbox {
        padding: 32rpx 36rpx;
        box-sizing: border-box;

        /deep/.placeholderStyle {
            font-size: 28rpx;
            color: #ffffff !important;
        }
    }

    // .tabbox {
    //     .tablist {
    //         height: 58rpx;
    //        padding: 0 36rpx;
    //        display: flex;
    //        align-items: center;
    //        justify-content: space-around;
    //        .item_tab {
    //             font-family: PingFang SC;
    //             font-weight: bold;
    //             font-size: 28rpx;
    //             color: #FFFFFF;
    //             opacity: 0.5;
    //             flex-shrink: 0;
    //             position: relative;
    //             &:not(:nth-child(1)) {
    //                 margin-left: 60rpx;
    //             }
    //        } 
    //        .active {
    //             font-family: PingFang SC;
    //             font-weight: bold;
    //             font-size: 32rpx;
    //             color: #FFFFFF;
    //             opacity: 1;
    //        }
    //        .line {
    //             width: 48rpx;
    //             height: 8rpx;
    //             background: #FFFFFF;
    //             border-radius: 200rpx;
    //             margin-top: 6rpx;
    //             position: absolute;
    //             bottom: -6rpx;
    //             left: 50%;
    //             transform: translateX(-50%);
    //             z-index: 9999;
    //        }
    //     }
    // }
    .content {
        height: calc(100vh - 448rpx);
        background: #FFFFFF;
        border-radius: 34rpx 34rpx 0 0;
        margin-top: 18rpx;

        .meal_list {
            //min-height: 330rpx;
            background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
            border-radius: 32rpx 32rpx 0 0;
            padding: 26rpx 28rpx;
            box-sizing: border-box;

            .list_title {
                display: flex;
                align-items: center;

                .list_icon {
                    width: 34rpx;
                    height: 34rpx;
                }

                text {
                    display: inline-block;
                    margin-left: 18rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #000000;
                }
            }

            .list {
                margin-top: 50rpx;

                .item_meal {
                    display: flex;
                    margin-bottom: 64rpx;

                    .radio_box {
                        width: 36rpx;
                        height: 36rpx;
                        background: #FFFFFF;
                        border-radius: 200rpx;
                        border: 2rpx solid #D2D2D2;
                        flex-shrink: 0;
                    }

                    .active_radio_box {
                        width: 36rpx;
                        height: 36rpx;
                        background: #FFFFFF;
                        border-radius: 50%;
                        border: 2rpx solid #0051FF;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-shrink: 0;

                        .active_radio_box_inside {
                            width: 24rpx;
                            height: 24rpx;
                            background: #0051FF;
                            border-radius: 50%;
                            border: 2rpx solid #0051FF;
                        }
                    }

                    .meal_detail {
                        margin-left: 18rpx;
                    }

                    .meal_name {
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #000000;
                        line-height: 44rpx;
                    }

                    .meal_sort,
                    .meal_type {
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 26rpx;
                        color: #999999;
                        margin-top: 12rpx;
                    }

                    .item_price {
                        margin-top: 12rpx;
                        height: 58rpx;
                        display: flex;
                        align-items: flex-end;

                        .red_price {
                            display: flex;
                            align-items: flex-end;
                            font-family: DIN;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #FF0000;

                            .big_price {
                                font-size: 48rpx;
                                line-height: 1;
                            }
                        }

                        .original_price,
                        .now_price {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #999999;
                        }

                        .original_price {
                            margin-left: 34rpx;
                            margin-right: 48rpx;
                        }
                    }
                }
            }
        }
    }

    .buy_btn {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 102rpx;
        background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
        font-weight: bold;
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 102rpx;
    }
}

.dialog_box {
    width: 650rpx;
    height: 250rpx;
    padding: 26rpx 26rpx 0 26rpx;
    box-sizing: border-box;

    .input_wrap {
        margin-top: 24rpx;
    }

    .submit_btn {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
        color: #fff;
        font-size: 30rpx;
        text-align: center;
        line-height: 88rpx;
        margin-top: 24rpx;
        border-radius: 16rpx;
    }
}
</style>